<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1、区别
        // 浅拷贝：只复制对象的第一层属性，如果属性值是对象的话，复制的是地址，如果修改了原对象中的对象属性，拷贝对象也会跟着改变
        // 深拷贝：复制对象的所有属性，包括嵌套的对象，修改原对象不会影响拷贝对象

        // 2、浅拷贝实现
        // 2.1、Object.assign()--只适用于对象
        var obj = { a: 1, b: [1, 2, 3], c: function () { console.log('i am c') } }
        var tar = {};
        Object.assign(tar, obj);
        // 2.2 遍历赋值
        function shallowCopy(target, origin) {
            for (let item in origin) target[item] = origin[item];
            return target;
        }
        // 2.3 Array.prototype.slice()
        // 用于从已有的数组中返回选定的元素。
        var arr = [1, 2, [3, 4]];
        var newArr = arr.slice(0);
        console.log(newArr)
        // 2.4 Array.prototype.concat()
        var newArr2 = arr.concat();
        console.log(newArr2)

        // 3、深拷贝实现
        // 3.1 JSON.parse(JSON.stringify(obj))
        // const a = JSON.parse(JSON.stringify(b))
        // 缺点：不能拷贝函数，不能拷贝undefined，不能拷贝symbol，不能拷贝循环引用的对象，不能拷贝正则，不能拷贝Date对象
        // 3.2 递归拷贝
        function deepCopy(target, origin) {
            for (let item in origin) {
                if (typeof origin[item] === 'object') {
                    target[item] = Array.isArray(origin[item]) ? [] : {};
                    deepCopy(target[item], origin[item])
                } else {
                    target[item] = origin[item]
                }
            }
            return target;
        }
    </script>
</body>

</html>